<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>书籍左右滑动页面</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            /* 添加容器居中样式 */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #333;
        }
        .phone-container {
            /* 模拟手机尺寸，常见手机宽度 375px，高度 812px */
            width: 375px;
            height: 812px;
            border: 10px solid #111;
            border-radius: 40px;
            overflow: hidden;
            position: relative;
        }
        /* 动画实现步骤 1：设置书籍容器为 flex 布局，添加过渡效果，用于实现页面切换的动画 */
        .book-container {
            display: flex;
            height: 100%;
            transition: transform 1s ease;
        }
        /* 动画实现步骤 2：设置每一页的最小宽度为 100%，确保页面能水平排列 */
        .page {
            min-width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 20px;
            background-color: #f9f3e4;
            border: 1px solid #ccc;
            position: relative;
        }
        .page-content {
            line-height: 1.6;
            font-size: 18px;
        }
        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            z-index: 10;
        }
        #prev-page {
            left: 10px;
        }
        #next-page {
            right: 10px;
        }
        .page1 {
            background-color: rgb(255, 170, 255);
        }
        .page2 {
            background-color: rgb(170, 255, 255);
        }
        .page3 {
            background-color: rgb(255, 255, 170);
        }
        /* 动画实现步骤 3：为不同页面状态添加对应的 class，通过 transform 属性控制页面位置 */
        /* 为每一页添加对应的 class 来控制位置 */
        .page-0 {
            transform: translateX(0);
        }
        .page-1 {
            transform: translateX(-100%);
        }
        .page-2 {
            transform: translateX(-200%);
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="book-container" id="bookContainer">
            <div class="page">
                <div class="page-content page1">
                    <h2>第一页</h2>
                    <p>这里是书籍的第一页内容。在这个示例中，我们实现了一个简单的左右滑动页面效果。</p>
                </div>
            </div>
            <div class="page">
                <div class="page-content page2">
                    <h2>第二页</h2>
                    <p>这是第二页的内容。你可以通过点击按钮或者滑动屏幕来切换页面。</p>
                </div>
            </div>
            <div class="page">
                <div class="page-content page3">
                    <h2>第三页</h2>
                    <p>这是第三页的内容。你可以根据需要添加更多的页面。</p>
                </div>
            </div>
        </div>
        <button class="nav-button" id="prev-page" onclick="prevPage()">上一页</button>
        <button class="nav-button" id="next-page" onclick="nextPage()">下一页</button>
    </div>

    <script>
        const bookContainer = document.getElementById('bookContainer');
        let currentPage = 0;

        // 滑动逻辑
        let touchStartX = 0;
        let touchEndX = 0;

        bookContainer.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        }, { passive: true });

        bookContainer.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        }, { passive: true });

        function handleSwipe() {
            if (touchEndX < touchStartX - 50) {
                nextPage();
            }
            if (touchEndX > touchStartX + 50) {
                prevPage();
            }
        }

        function nextPage() {
            if (currentPage < bookContainer.children.length - 1) {
                currentPage++;
                updateBookPosition();
            }
        }

        function prevPage() {
            if (currentPage > 0) {
                currentPage--;
                updateBookPosition();
            }
        }

        // 动画实现步骤 4：通过更新书籍容器的 class 来改变 transform 属性，实现页面切换动画
        function updateBookPosition() {
            // 移除所有页面位置相关的 class
            ['page-0', 'page-1', 'page-2'].forEach(cls => {
                bookContainer.classList.remove(cls);
            });
            // 添加当前页对应的 class
            bookContainer.classList.add(`page-${currentPage}`);
        }

        // 初始化页面位置
        updateBookPosition();

        // 处理窗口大小变化
        window.addEventListener('resize', updateBookPosition);
    </script>
</body>
</html>
